<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
	<meta name="renderer" content="webkit">
<title>犯错计数器</title>
</head>
<body>
<style>
	body{
		margin: 0;
		padding: 0;
		background-color: #aa001a;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	::selection{
		background-color: #FFF;
	}
	
	.btn-reset{
		width: 300px;
		line-height: 40px;
		margin-top: 20px;
	}
	.list{
		color: #FFF;
		margin-top: 40px;
		
	}
	.list-item{
		color: #FFF;
		display: flex;
		flex-direction: row;
		text-align: center;
		margin-bottom: 20px;
	}
	.list-name, .list-num{
		width: 50px;
		margin: 0 3px;
		line-height: 30px;
	}
	.list-name{
		text-align: right;
		background-color: transparent;
		border: none;
		color: #FFF;
		font-size: 16px;
	}
	.list-add, .list-sub{
		width: 30px;
		line-height: 30px;
		margin: 0 3px;
	}
	.btn-reset, .list-add, .list-sub{
		color: #FFF;
		text-align: center;
		border: 1px #FFF solid;
		border-radius: 6px;
		cursor: pointer;
	}
	.btn-reset:hover, .list-add:hover, .list-sub:hover{
		background-color: rgba(255,255,255,0.5);
	}
	.title{
		font-size: 46px;
		margin-top: 20px;
		line-height: 30px;
		background-color: transparent;
		border: none;
		text-align: center;
		width: 100%;
		color: #FFF;
	}
	.bgcolor{
		color: #FFF;
		line-height: 18px;
		font-size: 14px;
		margin-top: 20px;
		width: 140px;
	}
	.bgcolor-input{
		color: #FFF;
		line-height: 18px;
		font-size: 14px;
		background-color: transparent;
		border: none;
		width: 60px;
		display: inline;
	}
</style>
	
<div><input type="text" class="title" id="title"></div>
<div class="list" id="list">
<!--
	<div class="list-item">
		<div class="list-name">我</div>
		<div class="list-num">0</div>
		<div class="list-add">+</div>
		<div class="list-sub">-</div>
	</div>
-->
</div>
<div class="btn-reset" id="reset">重置</div>
<div class="bgcolor">
	<span>背景颜色 #</span><input type="text" class="bgcolor-input" id="bgcolor" placeholder="背景颜色">
</div>
	
<script>
(function(){
	/**
	  缓存对象
	  */
	var name = ["战士", "骑士", "白魔", "学者", "龙骑", "诗人", "黑魔", "召唤"]
	var list = document.getElementById('list')
	var tree = {}
	
	for(var i = 0; i < name.length; i++){
		tree[i] = {
			element: document.createElement('div'),
			num: 0,
			child: {
				name: document.createElement('input'),
				num: document.createElement('div'),
				add: document.createElement('div'),
				sub: document.createElement('div')
			}
		}
		
		tree[i].element.className = "list-item"
		
		tree[i].child.name.className = "list-name"
		tree[i].child.name.value = name[i]
		tree[i].child.name.value = localStorage.getItem('eat-shit-name-' + i) || name[i]
		localStorage.setItem('eat-shit-name-' + i, tree[i].child.name.value)
		console.log()
		
		;(function(tree, i){
			tree[i].child.name.addEventListener("input", function(){
				localStorage.setItem('eat-shit-name-' + i, tree[i].child.name.value)
			}, false)
		})(tree, i)
		
		tree[i].child.num.className = "list-num"
		tree[i].num = parseInt(localStorage.getItem('eat-shit-num-' + i)) || 0
		localStorage.setItem('eat-shit-num-' + i, tree[i].num)
		tree[i].child.num.innerHTML = tree[i].num
		
		
		tree[i].child.add.className = "list-add"
		tree[i].child.add.innerHTML = "+"
		
		tree[i].child.sub.className = "list-sub"
		tree[i].child.sub.innerHTML = "-"
		
		;(function(tree, i){
			tree[i].child.add.addEventListener("click", function(){
				tree[i].num = tree[i].num + 1
				localStorage.setItem('eat-shit-num-' + i, tree[i].num)
				tree[i].child.num.innerHTML = tree[i].num
			}, false)
			tree[i].child.sub.addEventListener("click", function(){
				tree[i].num = tree[i].num - 1
				localStorage.setItem('eat-shit-num-' + i, tree[i].num)
				tree[i].child.num.innerHTML = tree[i].num
			}, false)
		})(tree, i)
		
		
		tree[i].element.appendChild(tree[i].child.name)
		tree[i].element.appendChild(tree[i].child.num)
		tree[i].element.appendChild(tree[i].child.add)
		tree[i].element.appendChild(tree[i].child.sub)
		
		list.appendChild(tree[i].element)
	}
	
	document.getElementById('reset').addEventListener('click', function(){
		for(var i = 0 ; i < name.length; i++){
			tree[i].num = 0
			localStorage.setItem('eat-shit-num-' + i, tree[i].num)
			tree[i].child.num.innerHTML = tree[i].num
		}
	}, false)
	
	var title = document.getElementById('title')
	title.value = localStorage.getItem('eat-shit-title') || '犯错计数器'
	document.title = title.value
	title.addEventListener('input', function(){
		localStorage.setItem('eat-shit-title', title.value)
		document.title = title.value
	}, false)
	
	var bgcolor = document.getElementById('bgcolor')
	bgcolor.value = localStorage.getItem('eat-shit-bgcolor') || 'aa001a'
	document.body.style.backgroundColor = '#' + bgcolor.value
	bgcolor.addEventListener('blur', function(){
		localStorage.setItem('eat-shit-bgcolor', bgcolor.value)
		document.body.style.backgroundColor = '#' + bgcolor.value
		console.log()
	}, false)
	bgcolor.addEventListener('keypress', function(e){
		if(e.keyCode == 13){
			bgcolor.blur()
		}
	}, false)
})()
</script>
</body>
</html>